<template>
    <div class="tableDiv">
        <div class="findDiv">
            <span>订单查询：</span>
            <el-select v-model="select">
                <el-option value="startTime" label="开始时间">开始时间</el-option>
                <el-option value="endTime" label="结束时间">结束时间</el-option>
            </el-select>
            <div class="findBox">
                <el-input
                    placeholder="请输入内容"
                    v-model="input3"
                    class="input-with-select"
                    width="200px"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="searchOrder"
                    ></el-button>
                </el-input>
            </div>
        </div>
        <el-table
            :data="newTableData"
            height="350px"
            border
            style="width: 100%"
        >
            <el-table-column prop="_id" label="订单编号"> </el-table-column>
            <el-table-column prop="tenantsId.name" label="租客">
            </el-table-column>
            <el-table-column prop="parkingsId.address" label="车位">
            </el-table-column>
            <el-table-column prop="startTime" label="起租日期">
            </el-table-column>
            <el-table-column prop="endTime" label="到期时间"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <!-- 1-未支付 2-已支付 3-已取消 4-已完成 -->
                    <span v-if="scope.row.state == 1" style="color:red">未支付</span>
                    <span v-else-if="scope.row.state == 2" style="color:green">已支付</span>
                    <span v-else-if="scope.row.state == 3" style="color:blue">已取消</span>
                    <span v-else>已完成</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
                <!-- Table -->
                <template slot-scope="elem">
                    <el-button type="text" @click="lookDetail(elem.row)"
                        >详情</el-button
                    >
                    <el-button type="text" @click="del(elem.row._id)"
                        >删除</el-button
                    >
                </template>

                <el-dialog
                    title="订单详情"
                    :visible.sync="dialogTableVisible"
                    :append-to-body="true"
                >
                    <el-table :data="detailData">
                        <el-table-column
                            property="_id"
                            label="订单编号"
                        ></el-table-column>
                        <el-table-column
                            property="tenantsId.name"
                            label="租户"
                        ></el-table-column>
                        <el-table-column
                            property="lessorsId.username"
                            label="出租方"
                        ></el-table-column>
                        <el-table-column
                            property="parkingsId.address"
                            label="地址"
                        ></el-table-column>
                        <el-table-column
                            property="startTime"
                            label="下单时间"
                        ></el-table-column>
                        <el-table-column
                            property="endTime"
                            label="结束时间"
                        ></el-table-column>
                        <el-table-column
                            property="parkingsId.cycle"
                            label="使用时间"
                        ></el-table-column>
                        <el-table-column
                            property="parkingsId.price"
                            label="单价"
                        ></el-table-column>
                    </el-table>
                </el-dialog>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapMutations, mapState } = createNamespacedHelpers(
    "orders"
);
export default {
    props: ["state"],
    data() {
        return {
            num: 1,
            //弹出框
            detailData: [
                {
                    _id: "10086", //订单Id
                    tenantsID: "王小虎", //租户名字
                    lessorId: "王大虎", //出租方名字
                    parkingsId: "上海市普陀区金沙江路 1518 弄", //地址
                    startTime: "2016-05-01", //下单时间
                    endTime: "2016-05-02", //结束时间
                    useTime: "10h", //欲租时长
                    pirce: 10, //  单价
                },
            ],
            newState: "", //判断查看订单类别
            dialogTableVisible: false,
            //输入框
            input1: 1,
            input2: "",
            input3: "",
            select: "",
            //页面表格
            tableData: [],
        };
    },
    async mounted() {
        await this.getOrders();
        this.newState = this.state;
        this.tableData = this.ordersArr;
        this.nowTotal = this.total;
    },
    computed: {
        ...mapState(["ordersArr", "total", "pageSize", "currentPage"]),
        newdetailData() {
            return this.detailData;
        },
        newTableData() {
            return this.tableData;
        },
    },
    watch: {
        //详情数据改变时重新获取订单，更新element里的数据
        detailData() {
            this.getOrders();
        },
        state(newval, oldval) {
            this.newState = newval;
            this.changecurrentPage(1);
        },
        newState(newval, oldval) {
            this.changeState(newval);
            this.getOrders();
        },
        ordersArr() {
            this.tableData = this.ordersArr;
        },
        currentPage() {
            this.getOrders();
        },
        pageSize() {
            this.getOrders();
        },
    },
    methods: {
        ...mapActions(["getOrders", "delOrders", "findOrders"]),
        ...mapMutations(["changePageSize", "changecurrentPage", "changeState"]),
        //查看订单详情
        lookDetail(data) {
            this.dialogTableVisible = true;
            this.detailData[0] = {
                ...data,
            };
            this.getOrders();
        },
        //删除订单
        del(id) {
            this.delOrders(id);
            this.getOrders();
        },
        //页码方法
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changecurrentPage(val);
        },
        //查询订单
        searchOrder() {
            var data = {
                type: this.select,
                value: this.input3,
                pageSize: this.pageSize,
                currentPage: this.currentPage,
            };
            this.findOrders(data);
            // console.log("1", this.state);
            // this.changeState(undefined); //改变state状态，便于点击订单列表state值改变而重新触发获取
            // console.log("2", this.state);
        },
    },
};
</script>

<style lang="scss">
.tableDiv {
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    .findDiv {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;
        .findBox {
            width: 60%;
            .el-select .el-input {
                width: 130px;
            }
            .input-with-select .el-input-group__prepend {
                background-color: #fff;
            }
        }
        .el-table {
            width: 90%;
            margin: auto;
            left: 0;
            right: 0;
            .el-dialog {
                z-index: 99;
            }
        }
    }
}
</style>